<template>
  <div class="flowListBg">
  <div class="flowInfo" v-if="flowDetailData.length==0">
      <x-header :left-options="{backText: ''}" class='whiteHeader'>物流信息</x-header>
      <div class="flowList" v-if="flowData.length != 0" v-for="items in flowData">
          <div class="flowDate">
              <p>{{items.ACCEPTTIME}}</p>
          </div>
          <div class="flowImgs">
              <div class="flowStatus">
                  <p class="delivering" v-if="items.EXPSTATUS==1">订单派送中</p>
                  <p class="signIn" v-else>订单已签收</p>
              </div>
              <div class="flowCenter" v-for="item in items.DEARR">
                  <div class="flowImg">
                      <img :src="imgUrl+item.SERPHOTO" alt="" />
                  </div>
                  <div class="flowText">
                      <div class="goodsName">
                          <p>{{item.SERNAME}}</p>
                      </div>
                      <div class="goodsNumber">
                          <p>{{items.EXPCOMPNAME}}:&nbsp;{{items.EXPNO}}</p>
                      </div>
                      <div class="flowShow" @click="flowDetail(item.SERNAME,item.SERPHOTO,items.EXPNO)">
				                  <p>查看详情</p>
				              </div>
                  </div>    
              </div>
              <!--<div class="flowShow">
                  <p>查看详情</p>
              </div>-->
          </div>          
      </div> 
      <!-- <div class="flowBlank" v-if="flowData.length !== 0"></div> -->
      <div class="noFlow" v-if="flowData.length === 0&&flowData">
      		<div class="noFlowImg">
        		<img src="../../assets/image/msgCenter/noFreight.png" alt="" />
        	</div>
      		<div class="noFlowText">
      			<p>亲，没有您的物流信息</p>	
      		</div>        	
  		</div> 
  </div>
  
  
    <!--以下是物流跟踪start-->
    <div class="flowTrack" v-else >
        <x-header :left-options="{backText: ''}" class='whiteHeader'>物流信息</x-header>
        <div class="trackHeader">
            <div class="trackImg">
                <img :src="flowDetailData.fImg" alt="" />
            </div>
            <div class="trackText">
                <div class="trackName">
                    <p>{{flowDetailData.fName}}</p>
                </div>
                <div class="trackNumber">
                    <p>{{flowDetailData.expCompName}}:&nbsp;{{flowDetailData.LogisticCode}}</p>
                </div>
            </div>
        </div>
        <div class="trackBlank"></div>
        <div class="trackFooter">
            <div class="trackStep1" v-if="flowDetailData.Success">
                <div class="orderSuccessIcon1">
                    <img src="../../assets/image/msgCenter/orderSuccess.png" alt="" />
                </div>
                <div class="orderSuccessText1">
                    <div class="orderSuccessWord1">
                        <p>订单交易成功</p>
                    </div>
                    <div class="flowTime1">
                        <p>{{flowDetailData.expTime|filterTimess}}</p>
                    </div>
                </div>
            </div>
            <div class="trackStep2" v-for="items in flowDetailData.Traces">
                <div class="orderSuccessIcon2">
                    <img src="../../assets/image/msgCenter/received.png" alt="" />
                </div>
                <div class="orderSuccessText2">
                    <div class="orderSuccessWord2">
                        <p>{{items.AcceptStation}}</p>
                    </div>
                    <div class="flowTime2">
                        <p>{{items.AcceptTime}}</p>
                    </div>
                </div>
            </div>        
        </div>
    </div>  
    <!--物流跟踪end-->
  </div>
     
</template>
<script>
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"flowList",
  // 数据
  data(){

    return{
    		userId:'',//用户id
        flowData:'',//物流列表信息
        imgUrl:'',//车品封面图，需拼接
        flowDetailData:'',//物流详情
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');    
    //this.userId=137038;
    //this.userId=226725;
    //物流单历史记录
    this.$fetchPost('/LogisticsWeb/LogisticsListByUserId',{USER_ID:this.userId}).then(res=>{     
            //console.dir(res);
            if(res.STATUS_CODE == 1){
                this.flowData = res.RESULT_DATA;
                this.imgUrl = res.IMG_URL;
                //console.dir(res);
            }                                 
    },err=>console.log(err));
    
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
      //物流详情
      flowDetail(name,img,id){
            //物流跟踪记录            
            let fName = name,fImg = this.imgUrl+img;            
            this.$fetchPost('/LogisticsWeb/logisticsRecordByExpNo',{EXPNO:id}).then(res=>{                
                    if(res.STATUS_CODE == 1){
                        this.flowDetailData = res.RESULT_DATA;
                        this.flowDetailData.fName = fName;
                        this.flowDetailData.fImg = fImg;
                        //console.dir(this.flowDetailData);
                    }                                 
            },err=>console.log(err));
      },
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.vux-header{
		border-bottom:1px solid #fefefe;
}
.flowListBg{
    min-height: 100%;
    background: #e4e4e4;
    height: 100%;  
}
.flowInfo{
  min-height: 100%;
  background: #e4e4e4;    
    .flowBlank{
    	height:1rem;
    	background:#e4e4e4;
    }          
    .flowList{    	        
        .flowDate{
            height:0.64rem;            
            display:flex;
            flow-flex:column;
            justify-content:center;
            margin-top:0.24rem;
            p{
                font-size:0.22rem;
                color:#666;
                align-self:center;
            }
        }
        .flowImgs{            
            width:6.62rem;            
            border:0.01rem solid #d1cccd;            
            margin:0 auto;            
            .flowStatus{
                width:100%;
                height:0.58rem;                
                display:flex;
                flow-flex:column;     
                background:#fff;
                .delivering{
                    font-size:0.26rem;
                    color:#fb8508;
                    align-self:center;
                    padding-left:0.28rem;
                }
                .signIn{
                    font-size:0.26rem;
                    color:#2bb158;
                    align-self:center;
                    padding-left:0.28rem;
                }                
            }
            .flowCenter{
                width:100%;                
                height:2rem;                
                display:flex;
                background:#fff;
                position:relative;  
                .flowImg{                    
                    img{
                        width:1.68rem;
                        height:1.26rem;
                        padding-left:0.28rem;
                    }
                }
                .flowText{
                    width:4.66rem;
                    height:1.26rem;                                                          
                    .goodsName{                               
                        height:0.63rem;
                        display:flex;
                        flow-flex:column;                        
                        p{
                            font-size:0.28rem;
                            font-weight:bold;
                            color:#000;
                            align-self:center;
                            text-indent:0.20rem;
                        }
                    }
                    .goodsNumber{                                                
                        height:0.63rem;
                        display:flex;
                        flow-flex:column;                        
                        p{
                            font-size:0.24rem;
                            color:#999;
                            align-self:center;
                            text-indent:0.20rem;
                        }
                    }
                    .flowShow{
                    		position:absolute;
                    		bottom:0;
                    		left:0;				                
				                width:100%;
				                height:0.6rem;
				                background:#f0f0f0;
				                display:flex;
				                flex-flow:column;
				                justify-content:center;
				                p{
				                    font-size:0.24rem;
				                    color:#666;
				                    align-self:center;
				                }
				            }
                }
            }
            
        }        
    }
    .noFlow{
    	background:#e4e4e4;    	
    	padding-top:50%;
    	.noFlowText{    		
    		p{
            font-size:0.24rem;
            color:#a9a8ae;            
        }
    	}
      .noFlowImg{      	
      	img{
      		width:1.8rem;
      		height:1.8rem;
      	}
      }  
    }
}

.flowTrack{
   background:#fff; 
   padding-bottom:1rem;
   .trackHeader{
       width:100%;
       height:1.7rem;
       background:#4f8df4; 
       display:flex;
       .trackImg{
           width:1.5rem;
           height:1.26rem;
           img{
               width:1.26rem;
               height:1.26rem;
               margin-left:0.24rem; 
               margin-top:0.26rem; 
           }
       }
       .trackText{
           width:6rem;
           height:1.26rem;
           margin-top:0.26rem;           
           .trackName{               
               height:0.63rem;               
               p{
                   font-size:0.3rem;
                   color:#fff;
                   line-height:0.63rem;
                   text-align:left;
                   text-indent:0.16rem; 
               }
           }
           .trackNumber{
               height:0.63rem;
               p{
                   font-size:0.26rem;
                   color:#fff;
                   line-height:0.63rem;
                   text-align:left;
                   text-indent:0.16rem;
               }
           }
       }
   }
   .trackBlank{
       height:0.2rem;
       background:#efebeb; 
   }
   .trackFooter{
       background:#fff;
       .trackStep1{           
           margin-top:0.44rem;
           display:flex;
           .orderSuccessIcon1{               
               width:0.77rem;
               display:flex;
               flow-flex:column;
               justify-content:flex-end;               
               img{
                   width:0.27rem;
                   height:0.27rem;
                   margin-top:0.04rem;
               }
           }
           .orderSuccessText1{               
               width:6.73rem;               
               .orderSuccessWord1{
                   p{
                       font-size:0.26rem;
                       color:#0a9fd7;
                       text-align:left;                       
                       text-indent:0.22rem;
                   }
               }
               .flowTime1{
                   margin-top:0.22rem;
                   p{
                       font-size:0.22rem;
                       color:#0a9fd7;
                       text-align:left;
                       text-indent:0.22rem;
                   }
               }
           }
       }
       .trackStep2{           
           margin-top:0.66rem;
           display:flex;
           .orderSuccessIcon2{               
               width:0.77rem;
               display:flex;
               flow-flex:column;
               justify-content:flex-end;               
               img{
                   width:0.13rem;
                   height:0.13rem;
                   margin-top:0.04rem;
               }
           }
           .orderSuccessText2{               
               width:6.73rem;               
               .orderSuccessWord2{
                   p{
                       font-size:0.26rem;
                       color:#333;
                       text-align:left;                                              
                       padding-left:0.22rem;
                   }
               }
               .flowTime2{
                   margin-top:0.22rem;
                   p{
                       font-size:0.22rem;
                       color:#999;
                       text-align:left;
                       text-indent:0.22rem;
                   }
               }
           }
       }                                   
   }
}
</style>

